<template>
	<view>
		<view class="dhl" style="background-color: #FFDE21;"></view>
		<view class="topbar box dis_f_c_c" style="background-color: #FFDE21;">
			广告详情
			<image class="top_jt" src="../../static/icon/back.png" mode="aspectFit" @click="go_back"></image>
		</view>
		<view class="content">
			<view class="guang_gao">
				<view class="info_part dis_f_sb_c" @click="geren(list.user.id)">
					<view class="dis_f_l_c">
						<image class="tx" :src="list.user.avatar" mode="" ></image>
						<view class="dis_f_co_l_c">
							<view class="title">{{list.user.name}}</view>

							<view class="dis_f_l_c">
								<image v-if="list.istop == 1" style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
									src="../../static/icon/zhiding.gif" mode=""></image>
								<image v-if="list.is_refresh == 1"
									style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
									src="../../static/icon/shuaxin.gif" mode=""></image>
								<image v-if="list.isred == 1" style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
									src="../../static/icon/hongbao.gif" mode=""></image>
								<image v-if="list.user.isvip == 1"
									style="margin-right: 12rpx;height: 36rpx;width: 96rpx;"
									src="../../static/icon/vip.gif" mode=""></image>

							</view>
						</view>
					</view>
				</view>
				<view class="gg_title hh">
					{{list.content}}
				</view>
				<view class="gg_img dis_f_l_c dis_f_w">


					<image v-for="(img, i) in list.pic" :key="i" :src="img" :data-src="img"
						@click.stop="previewOpen(img,list.pic)"></image>

				</view>
				<view class="b_btn dis_f_l_c">
					<view class="dis_f_l_c" style="margin-right: 60rpx;">
						<image style="width: 33.97rpx;height: 24.75rpx;" src="../../static/index/s_btn1.png" mode="">
						</image>
						<view>{{list.visit}}</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;">
						<image style="width: 32.74rpx;height: 32.88rpx;" src="../../static/index/s_btn2.png" mode="">
						</image>
						<view>{{list.talknum}}</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;" @click="share">
						<image style="width: 32.33rpx;height: 32.33rpx;" src="../../static/index/s_btn3.png" mode="">
						</image>
						<view>分享</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;" @click="love(list.id)">
						<image v-if="list.islove" style="width: 34rpx;height: 29.56rpx;" src="../../static/index/hx.png"
							mode="">
						</image>
						<image v-else style="width: 34rpx;height: 29.56rpx;" src="../../static/index/s_btn4.png"
							mode="">
						</image>

						<view>{{list.love}}</view>
					</view>
				</view>
				<view class="more">
					<view v-if="list.isred == 1" class="dis_f_l_c hb_img">
						<image src="../../static/icon/hb.png" mode=""></image>
						<view class="font_bold">￥{{list.redallmoney}}</view>
					</view>
					<view v-else>{{list.create_time}}</view>
				</view>
			</view>
			<view class="hb_part dis_f_co" v-if="list.isred==1">
				<view class="size_22 font_bold c_2">红包已抢({{list.rednums}}/{{list.rednum}})</view>
				<view class="list2  size_22 dis_f_sb_c" v-for="(item,index) in list.red">
					<view class="dis_f_l_c ">
						<image :src="item.user.avatar" mode=""></image>
						<view class="c_7">{{item.user.name}}</view>
					</view>
					<view style="color: #D81E06;">￥{{item.money}}</view>
				</view>
			</view>
			<view class="ping_lun dis_f_co" v-if="list.talk !=''">
				<view class="size_22 font_bold c_2">全部评论({{list.talknum}})</view>
				<view class="list dis_f_l_c" v-for="(item,index) in list.talk">
					<image :src="item.user.avatar" mode=""></image>
					<view class="dis_f_co size_22" style="width: calc(100% - 116rpx);">
						<view class="dis_f_sb_c">
							<view class="c_7">{{item.user.name}}</view>
							<view class="c_b">{{item.create_time}}</view>
							<view v-if="item.del_true" @click="del_talk(item.id)" class="c_b" style="color: red;">删除</view>
						</view>
						<view class="c_2 hh">{{item.remark}}</view>
					</view>
				</view>
			</view>
			<view class="pl_btn dis_f">
				<image src="../../static/icon/index2.png" mode="" @click="go_index"></image>
				<image src="../../static/icon/fabu.png" mode="" @click="go_fabu"></image>
				<image src="../../static/icon/pinglun.png" mode="" @click="go_pl"></image>
			</view>
			<u-popup v-model="show" v-if="show" mode="bottom" width="600" height="100">
				<view class="t_c dis_f_l_c box">
					<u-input v-model="text" placeholder="请输入评论"></u-input>
					<view class="btns dis_f_c_c" @click="ping_lun(list.id)">评论</view>
				</view>
			</u-popup>
			<!-- 倒计时 -->
			<movable-area class="movableArea" >
				<movable-view class="movableView" direction="all" x="700rpx" y="600rpx">
					<view class="djs dis_f_co_c_c" v-if="list.isred == 1">
						<view style="font-size: 20rpx;" @click="lq_hb">{{red_text}}</view>
						<view v-if="red_show">
							<u-count-down @end="end" color="#fff" bg-color="none" :timestamp="timestamp"
								:show-minutes="false" :show-days="false" :show-hours="false"></u-count-down>
						</view>
					</view>
				</movable-view>
			</movable-area>


		</view>
	</view>
</template>

<script>
	// import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default {
		data() {
			return {
				show: false,
				timestamp: 10,
				text: '',
				h_b: true,
				imgs: [
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01467457773a5f0000018c1b8aed74.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625210874&t=d6e466f7906fa0b38a642d9c8f9f9730',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
				],
				imgs2: [
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01467457773a5f0000018c1b8aed74.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625210874&t=d6e466f7906fa0b38a642d9c8f9f9730',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2663636765,2012651130&fm=26&fmt=auto&gp=0.jpg',
				],
				ck_more: true,
				list: {
					user: {
						avatar: '',
					},
					talk: {
						avatar: '',
					}
				},
				id: 0,
				red_text:'红包领取',
				red_show:true,
			};
		},

		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.getguang(this.id)
			}

		},
	
		
		methods: {
			geren(e){
				this.$.open('/pages/mine/gr_zy?uid='+e)
			},
			end() {
				this.red_text = '领取'
				this.red_show = false
			},
			lq_hb(){
				if(this.red_show == true){
					return;
				}else{
					this.red();
				}
			},
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "/pages/guang_gao/guang_gao?id=" + this.list.id,
					title: this.list.user.name,
					summary: this.list.content,
					imageUrl: this.list.pic[0],
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			},
			red() {
				this.$.ajax(1, 'post', 'index/reduser', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					id: this.list.id,
					money: this.list.redmoney
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.$.ti_shi(res.msg)
						this.getguang(this.list.id)
					} else {
						this.$.ti_shi(res.msg)
					}
				})
			},
			getguang(e) {
				this.$.ajax(1, 'post', 'index/getguang_info', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					gid: e
				}, (res) => {
					// console.log(res.list[0].user)
					if (res.code == 1) {
						this.list = res.list
						this.list.talk = res.talk_list
						this.list.red = res.red_list
					}
				})
			},
			del_talk(id) {
				console.log(id);
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
					}else{
						this.$.ajax(1, 'post', 'index/del_guanggao_talk', {
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							id:id
						}, (res) => {
							console.log(res)
							if(res.code == 1){
								this.getguang(this.list.id)
							}else{
								this.$.ti_shi(res.msg)
							}
						})
					}
				})
			},
			//打开预览e
			previewOpen(img, e) {
				// console.log(e)
				this.$.look_img(img, e)

			},
			//长按事件
			longPress(data) {
				console.log(data);

			},
			go_index() {
				this.$.open_tab('/pages/index/index')
			},
			go_fabu() {
				this.$.open('/pages/guang_gao/fb')
			},
			go_pl() {
				this.show = true
			},
			ping_lun(e) {
				console.log(this.text)
				this.$.ajax(1, 'post', 'index/settalk', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					remark: this.text,
					cate: 0,
					id: e
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.text = ''
						this.show = false
						this.getguang(e)
					} else {
						this.$.ti_shi(res.msg)
					}

				})


			},
			love(e) {
				this.$.ajax(1, 'post', 'index/getguanglove', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					id: e
				}, (res) => {
					// console.log(res.list[0].user)
					if (res.code == 1) {
						this.list.love = this.list.love + 1
						this.getguang(e)
					} else {
						this.list.love = this.list.love - 1
						this.getguang(e)
					}

				})
			},
			// 返回
			go_back() {
				this.$.back()
			},
		}
	}
</script>

<style lang="scss">
	.movableArea {
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		
		.movableView {
			pointer-events: auto; //可以点击
			width: 120rpx;
			height: 110rpx;

		}
}
		.djs {
			border-radius: 50%;
			width: 108rpx;
			height: 108rpx;
			// position: fixed;
			z-index: 9999;
			// top: 50%;
			
			// right: 48rpx;
			background-color: #FA3534;
			color: #fff;
		}

		.dhl {
			// position: absolute;
			
			width: 100%;
			height: var(--status-bar-height);
			position: fixed;
			top: 0;
			z-index: 999;
		}

		.topbar {
			width: 100%;
			z-index: 999;
			height: 88rpx;
			position: fixed;
			top: var(--status-bar-height);
			font-size: 34rpx;
			color: #212730;
			font-weight: bold;
			// background-image: url(../../static/index/bg.png);
			// padding: 0 0 26rpx 0rpx;

			.top_jt {
				width: 18rpx;
				height: 32rpx;
				position: absolute;
				left: 40rpx;
				top: 28rpx;
			}
		}

		.content {
			width: 100%;
			padding: 36rpx 24rpx 0 24rpx;
			top: calc(var(--status-bar-height) + 88rpx);
			z-index: 998;
			position: absolute;

			.guang_gao {
				position: relative;
				margin-bottom: 12rpx;
				width: 100%;
				// height: 594rpx;
				background-color: #fff;
				box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
				border-radius: 20rpx;
				padding: 36rpx 26rpx;

				.info_part {
					width: 100%;
					margin-bottom: 18rpx;

					.tx {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						margin-right: 26rpx;
					}

					.title {
						color: #222;
						line-height: 40rpx;
						font-size: 28rpx;
						margin-bottom: 12rpx;
					}

					.gg_btn {
						color: #fff;
						font-size: 24rpx;
						line-height: 16rpx;
						border-radius: 18rpx;
						margin-right: 12rpx;
					}
				}

				.gg_title {
					font-size: 26rpx;
					line-height: 33rpx;
					color: #222;
					margin-bottom: 24rpx;
				}

				.gg_img {
					width: 100%;
					margin-bottom: 48rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin-right: 12rpx;
						margin-bottom: 12rpx;
					}

					.img_more {
						position: absolute;
						color: #fff;
						height: 150rpx;
						font-size: 22rpx;
						right: 10rpx;
						width: 30rpx;
						background-color: rgba($color: #000000, $alpha: .2);
						border-radius: 0 10rpx 10rpx 0;
					}
				}

				.gg_img image:last-child {
					border-radius: 10rpx 0 0 10rpx;
					position: relative;

				}

				.b_btn {
					font-size: 22rpx;
					color: #777;
					line-height: 32rpx;

					image {
						margin-right: 13rpx;
					}
				}

				.more {
					position: absolute;
					top: 36rpx;
					right: 40rpx;
					font-size: 22rpx;
					line-height: 32rpx;
					color: #BBB;

					.hb_img {
						color: #D81E06;
						line-height: 26rpx;
						font-size: 22rpx;

						image {
							width: 25.35rpx;
							height: 30.57rpx;
							margin-right: 12rpx;
						}
					}
				}
			}

			.hb_part {
				padding: 36rpx 24rpx;
				margin-bottom: 12rpx;
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);

				.list2 {

					padding: 26rpx 0;
					width: 100%;

					// border-bottom: 2rpx solid #EEE;
					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}
			}

			.hb_part .list2:last-child {
				padding-bottom: 0;
			}

			.ping_lun {

				width: 100%;
				padding: 36rpx 24rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
				background-color: #fff;

				.list {

					padding: 26rpx 0;
					width: 100%;
					border-bottom: 2rpx solid #EEE;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}
			}

			.pl_btn {
				position: fixed;
				bottom: 90rpx;
				right: 24rpx;

				image {
					width: 66rpx;
					height: 66rpx;
					margin-right: 24rpx;
				}

			}

			.pl_btn image:last-child {
				width: 138rpx;
			}

			.t_c {
				padding: 0 24rpx;
				width: 100%;
				height: 100rpx;
				background-color: #f6f6f6;

				.btns {
					margin-left: 12rpx;
					width: 86rpx;
					height: 46rpx;
					background-color: #2979ff;
					color: #fff;
					border-radius: 10rpx;
				}
			}
		}
</style>
